<!--
 * @Author: chunlai
 * @Date: 2023-12-14 09:04:26
 * @LastEditTime: 2025-09-10 17:24:25
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\count\components\RadioTwoSpan.vue
 * @Description: 单选按钮（两个）
-->
<template>
  <div class="radio_btns_ul">
    <span
      class="radio_item"
      :class="{
        active: duty.value == ele.value && !ele.forbid,
        forbid_btn: duty.forbid,
      }"
      @click.stop="changeRadio(ele)"
      v-for="(ele, index) in list"
      :key="`duty${duty.value}-${index}`"
    >
      {{ ele.label }}
    </span>
  </div>
</template>

<script>
export default {
  name: "RadioTwoSpan",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    duty: {
      type: Object,
      default: () => {},
    },
    fid: {
      type: [String, Number],
      default: () => "",
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    changeRadio(ele) {
      this.$emit("clickEvent", this.fid, this.duty, ele);
    },
  },
};
</script>
<style lang="less" scoped>
.radio_btns_ul {
  display: flex;
  flex-wrap: wrap;
  padding-top: 5px;

  .radio_item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 26px;
    color: #747474;
    padding: 0 12px;
    border-radius: 6px;
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    margin-right: 8px;

    &.active {
      border: 1px solid #f54040;
      background-color: #fff0f0;
      color: #f54040;
    }
    &.forbid_btn {
      opacity: 0.5;
    }
  }
}
</style>
